import { useQuery } from '@tanstack/react-query';
import { Card, Form, Input, Space, Table, Button, message } from 'antd';
import { ColumnsType } from 'antd/es/table';
import { useState } from 'react';

import commonService from '@/api/services/commonService';
import Editor from '@/components/editor';


export default function CouponPage() {
  const [form] = Form.useForm();

  const [showModal, setShowModal] = useState(false);
  const [formValue, setFormValue] = useState<any>({});
  const { data, refetch } = useQuery({
    queryKey: ['/admin/base-property/getBottomLinkList'],
    queryFn: async () => {
      return commonService.getCustomApi('/admin/base-property/getBottomLinkList', {});
    },
  });

  const save = () => {
    const params = form.getFieldsValue();
    if (formValue.id) {
      commonService.editApi('base-property', { ...formValue, ...params }).then(() => {
        message.success('编辑成功');
        setShowModal(false);
        refetch();
      });
    } else {
      commonService.addApi('base-property', { ...params }).then(() => {
        message.success('编辑成功');
        setShowModal(false);
        refetch();
      });
    }
  };

  const toEdit = (row: any) => {
    setFormValue(row);
    setShowModal(true);
  };

  // const onCreate = () => {
  //   setFormValue({});
  //   form.setFieldsValue({});
  //   setShowModal(true);
  // };

  const columns: ColumnsType<any> = [
    { title: 'ID', dataIndex: 'id', align: 'center', width: 60 },
    { title: '标题', dataIndex: 'title', align: 'center', width: 60 },
    {
      title: '操作',
      key: 'operation',
      align: 'center',
      width: 100,
      render: (_, record) => (
        <div className="flex w-full gap-[10px] justify-center text-gray">
          <Button type="primary" onClick={() => toEdit(record)}>编辑</Button>
          {/* <Popconfirm
            title="确认删除该数据？"
            okText="确定"
            cancelText="取消"
            placement="left"
            onConfirm={() => doDel(record.id)}
          >
            <Button>删除</Button>
          </Popconfirm> */}
        </div>
      ),
    },
  ];

  return (
    <Space direction="vertical" size="large" className="w-full">
      {showModal ? <Form
        initialValues={formValue}
        form={form}
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 18 }}
        layout="horizontal"
      >
        <Form.Item<any> label="标题" name="title" required>
          <Input />
        </Form.Item>
        <Form.Item<any> label="内容" name="detail" required>
          <Editor />
        </Form.Item>
        <Button type="primary" onClick={() => save()}>提交</Button>
      </Form> : <Card
        title="文章管理"
        extra={
          <div className="flex flex-row gap-[10px]">
            {/* <Button
              type="primary"
              onClick={() =>
                onCreate()
              }
            >
              新增
            </Button> */}
          </div>
        }
      >
        <Table
          rowKey="id"
          size="small"
          scroll={{ x: 'max-content' }}
          columns={columns}
          dataSource={data}
        />
      </Card>}
    </Space>
  );
}
